<template>
  <div class="line-comp">
    <div class="r-title">
      控制线设置
      <el-button size="mini" type="primary" plain>
        <i class="el-icon-circle-plus-outline"></i>
        添加
      </el-button>
      <el-button size="mini" type="danger" plain>
        <i class="el-icon-delete"></i>
        删除
      </el-button>
    </div>
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template slot="label"> 映射名称</template>
        <el-select v-model="dataLineDatas.name" size="mini">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 传输方式</template>
        <el-select v-model="dataLineDatas.type" size="mini">
          <el-option label="CAN总线" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item
          :labelStyle="{
          'background-color': '#E4F2FF',
          color: '#3F88F7',
        }"
      >
        <template slot="label">
          <i class="el-icon-upload2"></i>
          输 出
        </template>
        <el-select v-model="dataLineDatas.out" size="mini">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item
          :labelStyle="{
          'background-color': '#DBF9F9',
          color: '#57D2D7',
        }"
      >
        <template slot="label">
          <i class="el-icon-download"></i>
          输 入
        </template>
        <el-select v-model="dataLineDatas.in" size="mini">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-descriptions-item>
    </el-descriptions>
    <el-form v-if="dataMappingList.length > 0" size="small">
      <el-form-item
          v-for="(comp, ci) in dataMappingList"
          :key="ci"
          class="comp"
      >
        <!-- <div class="comp-title">
                  <div class="t-out">
                    <img
                      src="../../../assets/img/choreographer/信号接入.png"
                      alt=""
                    />
                    <el-select
                      v-model="comp.compOut"
                      placeholder="输出组件名称"
                    >
                      <el-option label="1" value="1"></el-option>
                      <el-option label="2" value="2"></el-option>
                    </el-select>
                  </div>
                  <div class="t-in">
                    <img
                      src="../../../assets/img/choreographer/信号接入.png"
                      alt=""
                    />
                    <el-select v-model="comp.compIn" placeholder="输入组件名称">
                      <el-option label="1" value="1"></el-option>
                      <el-option label="2" value="2"></el-option>
                    </el-select>
                  </div>
                </div> -->

        <el-form-item
            :label="intf.interfaceName"
            style="background-color: #e5e8ef; margin: 10px"
            v-for="(intf, ii) in comp.children"
            :key="ci + ii"
        >
          <div class="intf cont">
            <el-select v-model="intf.interfaceOut" placeholder="输出接口选择">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
            <el-select v-model="intf.interfaceIn" placeholder="输入接口选择">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
            <div class="f-after">
              <el-link type="primary" :underline="false">
                <i
                    class="el-icon-circle-plus-outline"
                    @click="handleAddItem('intf', intf)"
                ></i>
              </el-link>
              <el-link type="danger" :underline="false">
                <i
                    class="el-icon-remove-outline"
                    @click="handleDelItem('intf', intf)"
                ></i>
              </el-link>
            </div>
          </div>

          <el-form-item
              :label="arg.argumentName"
              v-for="(arg, ai) in intf.children"
              :key="ci + ii + ai"
          >
            <div class="arg cont">
              <el-select v-model="arg.argumentOut" placeholder="输出参数设置">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
              </el-select>
              <el-select v-model="arg.argumentIn" placeholder="输入参数设置">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
              </el-select>
              <div class="f-after">
                <el-link type="primary" :underline="false">
                  <i
                      class="el-icon-circle-plus-outline"
                      @click="handleAddItem('arg', arg)"
                  ></i>
                </el-link>
                <el-link type="danger" :underline="false">
                  <i
                      class="el-icon-remove-outline"
                      @click="handleDelItem('arg', arg)"
                  ></i>
                </el-link>
              </div>
            </div>
          </el-form-item>
        </el-form-item>
      </el-form-item>
    </el-form>
    <el-empty v-else description="暂无数据映射"></el-empty>
  </div>
</template>

<script>
export default {
  props: ["dataLineDatas", "dataMappingList"],
  data() {
    return {};
  },
};
</script>

<style lang='less' scoped>
  .line-comp {
    .r-title {
      padding: 10px;
      padding-top: 0;
    }

    .el-form-item {
      // padding: 8px 0;
      // margin: 5px 0;
      border-radius: 2px;

      .el-form-item__label {
        padding-top: 8px;
        width: 60px;
      }

      .cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .f-after {
        width: 60px;
        // background-color: #fff;
        // align-self: flex-end;
        text-align: center;

        a {
          font-size: 18px;
          // display: none;
        }
      }

      &:hover {
        .f-after {
          a {
            display: inline-flex;
          }
        }
      }
    }
  }

  .el-select {
    margin: 8px 0;
  }

  .el-descriptions {
    .el-descriptions-item__cell {
      padding: 0 !important;

      .el-select {
        width: 100%;
        margin: 0;
      }
    }

    .el-descriptions-item__label {
      width: 80px;
      text-align: center;
    }
  }
</style>